<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据统计</title>
    <style>
        .like {
            cursor: pointer;
            font-size: 25px;
            display: inline-block;
        }
    </style>

    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/server.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="6">
            <el-card shadow="hover" style="width: 100%;">
                <div slot="header" class="clearfix">
                    <span><i class="el-icon-s-flag" style="color: red"></i>今日账单数</span>
                </div>
                <div style="font-size: 18px;text-align: center; margin-top: 15px;">
                    {{todaycount}} 笔
                </div>
                <div style="margin-top: 15px;"></div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card shadow="hover" style="width: 100%;">
                <div slot="header" class="clearfix">
                    <span><i class="el-icon-s-flag" style="color: yellow"></i>昨日账单数</span>
                </div>
                <div style="font-size: 18px;text-align: center; margin-top: 15px;">
                    {{yesterdaycount}} 笔
                </div>
                <div style="margin-top: 15px;"></div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card shadow="hover" style="width: 100%;">
                <div slot="header" class="clearfix">
                    <span><i class="el-icon-s-flag" style="color: blue"></i>本周账单数</span>
                </div>
                <div style="font-size: 18px;text-align: center; margin-top: 15px;">
                    {{weekcount}} 笔
                </div>
                <div style="margin-top: 15px;"></div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card shadow="hover" style="width: 100%;">
                <div slot="header" class="clearfix">
                    <span><i class="el-icon-s-flag" style="color: green"></i>本月账单数</span>
                </div>
                <div style="font-size: 18px;text-align: center; margin-top: 15px;">
                    {{monthcount}} 笔
                </div>
                <div style="margin-top: 15px;"></div>
            </el-card>
        </el-col>
    </el-row>
    <div style="margin-top: 25px;"></div>
    <el-row>
        <el-col :span="12">
            <el-card shadow="hover" style="width: 100%;">
                <div slot="header" class="clearfix">
                    <span><i class="el-icon-top-right" style="color: red"></i>最近7天账单数量趋势</span>
                </div>
                <div id="container1" style="height: 300px;"></div>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card shadow="hover" style="width: 100%;">
                <div slot="header" class="clearfix">
                    <span><i class="el-icon-s-data" style="color: green"></i>最近7天账单金额趋势</span>
                </div>
                <div id="container2" style="height: 300px;"></div>
            </el-card>
        </el-col>
    </el-row>
</div>

<script>
    // 统一使用一个Vue实例管理所有组件，避免多实例冲突
    new Vue({
        el: "#app",
        data: {
            todaycount: 0,
            yesterdaycount: 0,
            weekcount: 0,
            monthcount: 0,
            // 图表1数据
            chart1Data: {
                dates: [],
                counts: []
            },
            // 图表2数据
            chart2Data: {
                dates: [],
                amounts: []
            }
        },
        methods: {
            // 获取账单统计数量
            fetchBillCounts() {
                axios.get(server_url + "/api/bill/count")
                    .then(resp => {
                        if (resp.data.code === 0) {
                            const data = resp.data.data;
                            this.todaycount = data.todaycount || 0;
                            this.yesterdaycount = data.yesterdaycount || 0;
                            this.weekcount = data.weekcount || 0;
                            this.monthcount = data.monthcount || 0;
                        }
                    })
                    .catch(err => console.error("获取统计数据失败:", err));
            },

            // 获取最近7天账单数量趋势
            fetchRecentBillCounts() {
                axios.get(server_url + "/api/bill/recent/count")
                    .then(resp => {
                        if (resp.data.code === 0) {
                            resp.data.data.forEach(item => {
                                this.chart1Data.dates.push(item.billdate);
                                this.chart1Data.counts.push(item.dailycount);
                            });
                            this.initChart1();
                        }
                    })
                    .catch(err => console.error("获取趋势数据失败:", err));
            },

            // 获取最近7天账单金额趋势
            fetchRecentBillAmounts() {
                axios.get(server_url + "/api/bill/recent/amount")
                    .then(resp => {
                        if (resp.data.code === 0) {
                            resp.data.data.forEach(item => {
                                this.chart2Data.dates.push(item.billdate);
                                this.chart2Data.amounts.push(item.dailytotalamount);
                            });
                            this.initChart2();
                        }
                    })
                    .catch(err => console.error("获取金额趋势失败:", err));
            },

            // 初始化图表1
            initChart1() {
                const chart = echarts.init(document.getElementById('container1'));
                chart.setOption({
                    xAxis: {
                        type: 'category',
                        data: this.chart1Data.dates
                    },
                    yAxis: {
                        type: 'value',
                        name: '账单数量'
                    },
                    series: [{
                        data: this.chart1Data.counts,
                        type: 'line',
                        smooth: true,
                        itemStyle: {
                            color: '#ff4500'
                        }
                    }]
                });
                // 监听窗口大小变化，自动调整图表尺寸
                window.addEventListener('resize', () => chart.resize());
            },

            // 初始化图表2
            initChart2() {
                const chart = echarts.init(document.getElementById('container2'));
                chart.setOption({
                    xAxis: {
                        type: 'category',
                        data: this.chart2Data.dates
                    },
                    yAxis: {
                        type: 'value',
                        name: '账单金额(元)'
                    },
                    series: [{
                        data: this.chart2Data.amounts,
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        },
                        itemStyle: {
                            color: '#22c55e'
                        }
                    }]
                });
                // 监听窗口大小变化，自动调整图表尺寸
                window.addEventListener('resize', () => chart.resize());
            }
        },
        mounted() {
            // 页面加载时获取所有数据
            this.fetchBillCounts();
            this.fetchRecentBillCounts();
            this.fetchRecentBillAmounts();
        }
    });
</script>
</body>
</html>